<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Mark Of The Web- see http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/motw.asp for info why this is here -->
<!-- saved from url=(0024)http://www.microsoft.com/ -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WPF/E QuickStart: images</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type='text/javascript' src='samples/aghost.js'></script>
</head>

<body>
<div class="header-section">
<table>
  <tr>
  <td><img src="images/cameranotebook.png" /></td><td><h1>images</h1></td>
  </tr>
</table>
</div>
<a class="showtoclink" href="image-frames.html">show toc</a>
<div class="intro-section">
<p>The <span class="api-name">Image</span> element enables you to display bitmap images in WPF/E.</p>
<p>This document contains the following sections.</p>
        <ul>
            <li><a href="#imageelement">the Image element</a></li>
            <li><a href="#stretchproperty">the Stretch property</a></li>
            <li><a href="#otherways">other ways to use bitmaps</a></li>
            <li><a href="#whatsnext">what's next?</a></li>
        </ul>

</div>

<div class="section">
<a name="imageelement"></a>
<h3>the Image element</h3>
<p>The <span class="api-name">Image</span> element provides a convenient way to display JPG and PNG images in
WPF/E. &nbsp;To display an image, set the <span class="api-name">Image</span> object&#39;s
<span class="api-name">Source</span> property with the
path of your image file. The following example uses an <span class="api-name">Image</span> element to display a
141 by 131 bitmap
image. Because the <span class="api-name">Image</span> element&#39;s
<span class="api-name">Width</span> and <span class="api-name">Height</span> properties are not
specified, the bitmap is displayed at its native size.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml0_hyperlink' onclick="toggleCode('xaml0','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for image-simple.xaml-->
<pre id='xaml0' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span>
   <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
   <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
<strong>  <span class='code-blue'>&lt;</span><span class='code-brown'>Image</span> <span class='code-red'>Source</span><span class='code-blue'>=</span><span class='code-blue'>"star.png"</span> <span class='code-blue'>/&gt;</span>
</strong><span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag0_hyperlink' onclick="toggle_ag0()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag0_restart' onclick="restart_ag0();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag0Host">
    </div>

    <script type="text/javascript">
    var ag0visible = !(true);

    function toggle_ag0() {
        var text = "preview";
        if (ag0visible) {
            ag0visible = false;

            var element = document.getElementById("ag0Host");
            element.style.display = "none";
			element = document.getElementById("ag0_restart");
            element.style.display = "none";


            document.getElementById("ag0_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag0Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag0", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/image-simple.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag0Host");
            element.style.display = "";
            ag0visible = true;
			element = document.getElementById("ag0_restart");
            element.style.display = "";
            document.getElementById("ag0_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag0() {

	            new agHost(
	                "ag0Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag0", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/image-simple.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag0visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag0();
    </script>

</div>

<div class="section">
<a name="stretchproperty"></a>
<h3>the Stretch property</h3>
<p>When the size of the <span class="api-name">Image</span> element and the size of its bitmap are different, the
<span class="api-name">Stretch</span> property
   determines how the bitmap is stretched to fit the Image element. The
<span class="api-name">Stretch</span>
property takes the following values: <code>None</code>, <code>Fill</code>, <code>Uniform</code>, <code>UniformToFill</code>. The
following example demonstrates the <code>None</code>, <code>Uniform</code>, and <code>Fill</code> settings.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml1_hyperlink' onclick="toggleCode('xaml1','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for image-stretch.xaml-->
<pre id='xaml1' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span>
   <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
   <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span>
   <span class='code-red'>Background</span><span class='code-blue'>=</span><span class='code-blue'>"White"</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Image</span> <span class='code-red'>Source</span><span class='code-blue'>=</span><span class='code-blue'>"star.png"</span> <strong><span class='code-red'>Stretch</span><span class='code-blue'>=</span><span class='code-blue'>"None"</span></strong>
     <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"100"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"100"</span> <span class='code-blue'>/&gt;</span>
  
  <span class='code-blue'>&lt;</span><span class='code-brown'>Image</span> <span class='code-red'>Source</span><span class='code-blue'>=</span><span class='code-blue'>"star.png"</span> <strong><span class='code-red'>Stretch</span><span class='code-blue'>=</span><span class='code-blue'>"Fill"</span></strong>
     <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"100"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"100"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"100"</span> <span class='code-blue'>/&gt;</span>   
  
  <span class='code-blue'>&lt;</span><span class='code-brown'>Image</span> <span class='code-red'>Source</span><span class='code-blue'>=</span><span class='code-blue'>"star.png"</span> <strong><span class='code-red'>Stretch</span><span class='code-blue'>=</span><span class='code-blue'>"Uniform"</span></strong>
     <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"100"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"100"</span> <span class='code-blue'>/&gt;</span> 
     
<span class='collapsedXaml'>  <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"0"</span><span class='code-blue'>&gt;</span><span class='code-black'>None</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"100"</span><span class='code-blue'>&gt;</span><span class='code-black'>Fill</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span><span class='code-blue'>&gt;</span><span class='code-black'>Uniform</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span> 
</span><span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag1_hyperlink' onclick="toggle_ag1()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag1_restart' onclick="restart_ag1();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag1Host">
    </div>

    <script type="text/javascript">
    var ag1visible = !(true);

    function toggle_ag1() {
        var text = "preview";
        if (ag1visible) {
            ag1visible = false;

            var element = document.getElementById("ag1Host");
            element.style.display = "none";
			element = document.getElementById("ag1_restart");
            element.style.display = "none";


            document.getElementById("ag1_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag1Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag1", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/image-stretch.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag1Host");
            element.style.display = "";
            ag1visible = true;
			element = document.getElementById("ag1_restart");
            element.style.display = "";
            document.getElementById("ag1_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag1() {

	            new agHost(
	                "ag1Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag1", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/image-stretch.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag1visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag1();
    </script>

<p>For more information about the different stretch settings, see the
Stretch</span> property in the WPF/E SDK.</p>
</div>
<div class="section">
<a name="otherways"></a>
<h3>other ways to use bitmaps</h3>
<p>To use a bitmap as a background, use the <span class="api-name">ImageBrush</span> object. See <a href="drawing-noframes.html">drawing and painting</a> for more information.</p>
</div>

<div class="section">
<a name="whatsnext"></a><h3>what's next</h3>
<p> The next topic, <a href="text-noframes.html">text</a>,
describes how to use the <span class="api-name">TextBlock</span> element
to add text to your WPF/E content. </p>
</div>

<div class="copyright-section">
<p>Copyright © 2007 Microsoft Corporation.
All rights reserved. <a href="http://www.microsoft.com/info/cpyright.htm" target="new">Legal Notices</a>.</p>
</div>

    <script type="text/javascript">
    var visibility = new Object();
    for (var i=0; i != 2; i++) {
        visibility["xaml"+i] = true;
        visibility["js"+i] = true;
        visibility["cs"+i] = true;
    }
            
    function toggleCode(id, text) {
        if (visibility[id]) {
            visibility[id] = false;
            document.getElementById(id).style.display = "none";
            document.getElementById(id+ "_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            visibility[id] = true;
            document.getElementById(id).style.display = "";
            document.getElementById(id+ "_hyperlink").innerHTML = "[hide "+ text + "]";
        }
        window.event.returnValue = false;
    }
    </script>
</body>

</html>
